<template>
	<view style='padding-top:30vh'>
		<u-empty mode="permission" :text='tips' iconColor='#19be6b'>
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '正在发起微信支付...',
				code: '获取中..',
				state: '获取中..',
				invoice: 0,
				data: ''
			}
		},
		onLoad() {
			// uni.showLoading()

			const urlParams = new URLSearchParams(window.location.search);
			const invoice = urlParams.get('invoice');
			const code = urlParams.get('code');
			const state = urlParams.get('state');
			this.code = code
			this.state = state
			this.invoice = invoice
			if (code && state) {
				this.request.get(`wechat/official/login?code=${code}`).then((res) => {
					uni.setStorageSync('api_token', res.data)
					this.payOrder()
				})
			} else {
				uni.hideLoading()
				uni.showModal({
					title: '',
					content: '获取微信信息失败，请点击最下方使用完整服务再重新扫码！',
					showCancel: false,
					success: () => {

					}
				})
			}
		},
		onShow() {

		},
		methods: {
			payOrder() {
				uni.showLoading()
				this.request.post(`api/invoices/${this.invoice}/pay/huifu`, {
					gateway: 'jspay',
					trade_type: 'T_JSAPI'
				}).then((res) => {
					uni.hideLoading()
					this.data = res.data
					let _this = this
					const info = JSON.parse(res.data.payment.pay_info)
					try {
						window.WeixinJSBridge.invoke(
							'getBrandWCPayRequest', info,
							function(ress) {
								uni.hideLoading()
								if (ress.err_msg == "get_brand_wcpay_request:ok") {
									uni.showToast({
										icon: 'success',
										title: '支付成功'
									})
									_this.tips = '支付成功！'
									_this.orderType = 'END'
								} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
									uni.showToast({
										icon: "none",
										title: "'已取消支付"
									})
								} else {
									uni.showToast({
										icon: "none",
										title: "支付失败"
									})
								}
							}
						);
					} catch (error) {
						uni.hideLoading()
						console.log(error)
						_this.tips = '交易失败，请重试！'
						uni.showModal({
							title: '提示',
							content: JSON.stringify(error),
							showCancel: false,
							success: () => {}
						})
					}
				}).catch((err) => {
					uni.showModal({
						title: '',
						content: err,
						success: () => {
							
						}
					})
					uni.hideLoading()
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #e9eae9;
		text-align: center;
		padding: 5px 0px;
	}

	.group {
		margin: 10px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
	}

	.title {
		color: #909399;
		font-size: 14px;
		line-height: 32px;
	}

	.name {
		font-size: 14px;
		float: right;
		padding-right: 10px;
		line-height: 32px;
		color: #303133;
	}

	.div1 {
		// background-color: #040313;
		// margin: 10px;
		text-align: center;
		// padding: 10px;
		// border-radius: 10px;
	}

	.label {
		color: white;
		font-size: 14px;
		text-align: center;
	}

	.amount {
		color: #f56c6c;
		text-align: center;
	}

	.amount-detail {
		font-size: 35px;
		font-weight: bold;
	}

	.btn {
		padding: 10px 0px;
		margin: 5px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;
		color: #303133;
		font-size: 28px;
		font-weight: bold;
		border: solid #f3f3f3 1px;
	}


	.wechat-pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wechat-pay-btn-default {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #909399;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ali-pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #2979ff;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ali-pay-btn-default {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #909399;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>